{% extends "public/style1/common/base.html" %}

{% block title %}
{{ article.title }}
{% endblock %}

{% block body_class %}single{% endblock %}

{% block content %}
<!-------大图片后面的导航栏部分结束------->
<!---------文章主体---------------->
<div class="crt-container-sm">
    <div class="crt-paper-layers">
        <div class="crt-paper clearfix">
            <div class="crt-paper-cont clear-mrg">
                <article class="post hentry">
                    <div class="post-media">
                        <div class="post-image">
                            <img src="/public/style1/images/uploads/blog/post-image.jpg" alt="">
                        </div>
                    </div>
                    <div class="padd-box-sm">
                        <header class="post-header text-center">
                            <h1 class="post-title entry-title text-upper">
                                {{ article.title }}
                            </h1>
                            <div class="post-header-info">
                                        <span class="posted-on">
                                            <span class="screen-reader-text">Posted on </span>
                                             <a href="/view/articles/detail/{{ article.uuid }}" rel="bookmark">
                                                 <time class="post-date published"
                                                       datetime="{{ article.create_at }}">{{ article.create_at }}</time>
                                                 <time class="post-date updated"
                                                       datetime="{{ article.update_at }}">{{ article.update_at }}</time>
                                            </a>
                                        </span>
                                &nbsp;<span class="post-author vcard">by
                                                    <a class="url fn n" href="/view/about" rel="author">Author</a>
                                          </span>
                            </div>

                        </header>
                        <div class="post-content entry-content editor clearfix clear-mrg">
                            <h3 class="text-upper">摘要</h3>
                            <p>{{ article.summary }}</p>
                            <div>{{ article.content |safe }}</div>
                            <footer class="post-footer">
                                <div class="post-footer-top brd-btm">
                                    <div class="post-footer-info">
                                                <span class="post-cat-links">
                                                    <span class="screen-reader-text">Categories</span>
                                                    <a href="#" rel="category tag">Work</a>&nbsp;,&nbsp;
                                                    <a href="#" rel="category tag">Team</a>
                                                </span>
                                        <span class="post-line">|</span>
                                        <a href="" class="post-comments-count">{{ article.comment_count }} 条评论</a>
                                    </div>
                                </div>
                                <!---文章的标签-->
                                <div class="post-footer-btm">
                                    <div class="post-tags">
                                        <span class="screen-reader-text">Tags</span>
                                        {% for item in article.labels %}
                                        <a href="#" title="Nicaragua" rel="tag">{{ item }}</a>
                                        {% endfor %}
                                    </div>
                                </div>
                                <!----文章标签结束---->
                            </footer>
                        </div>
                    </div>
                </article><!-- .post -->
                <!-----评论开始------->
                <div id="comments" class="comments-area"><h2 class="title text-upper">Comments</h2>
                    <div class="padd-box-sm">
                        <ol class="comment-list clear-list">
                            <!----主评论------>
                            <li class="comment bypostauthor">
                                <article class="comment-body">
                                    <header class="comment-header">
                                        <div class="comment-author vcard">
                                            <img alt=""
                                                 src="/public/style1/images/uploads/avatar/avatar-58x58-01.png"
                                                 srcset="/public/style1/images/uploads/avatar/avatar-116x116-01-2x.png 2x"
                                                 class="avatar avatar-58 photo"
                                                 height="58" width="58">
                                            <strong class="fn">
                                                <a href="#" rel="external nofollow" class="url">
                                                    SOPHIA BALLARD
                                                </a>
                                            </strong>
                                        </div>
                                        <div class="comment-date"> at <a href="#">
                                            <time datetime="2016-07-04T11:33:08+00:00">11:58 am October
                                                17.2013
                                            </time>
                                        </a></div>
                                    </header>
                                    <div class="comment-content clear-mrg">
                                        <p>To delete a comment, just log in
                                            and view the post's comments. There you will have the option to edit or
                                            delete them.</p>
                                    </div>
                                    <footer class="comment-footer">
                                        <div class="comment-replys-count">
                                            <a rel="nofollow"
                                               class="comment-replys-link"
                                               href="#"
                                               aria-label="Replys to Mr WordPress">3
                                                replies</a>
                                        </div>
                                        <div class="comment-links">
                                            <a class="comment-reply-link" rel="nofollow"
                                               href="#"
                                               aria-label="Reply to Mr WordPress">Reply</a>
                                            <a class="comment-edit-link" rel="nofollow" href="#">Edit</a>
                                        </div>
                                    </footer>
                                </article><!-- .comment-body -->
                                <ol class="children clear-list">
                                    <li class="comment">
                                        <article class="comment-body">
                                            <header class="comment-header">
                                                <div class="comment-author vcard">
                                                    <img alt=""
                                                         src="/public/style1/images/uploads/avatar/avatar-58x58-default.png"
                                                         srcset="/public/style1/images/uploads/avatar/avatar-116x116-default-2x.png 2x"
                                                         class="avatar avatar-58 avatar-default photo"
                                                         height="58"
                                                         width="58">
                                                    <strong class="fn">
                                                        <a href="#" rel="external nofollow" class="url">STEVE
                                                            RONALD</a></strong></div>
                                                <div class="comment-date"> at <a href="#">
                                                    <time datetime="2016-07-04T11:33:08+00:00">11:58 am October
                                                        17.2013
                                                    </time>
                                                </a></div>
                                            </header>
                                            <div class="comment-content clear-mrg"><p>To delete a comment, just
                                                log in and view the post's comments. There you will have the
                                                option to edit or delete them.</p></div>
                                            <footer class="comment-footer">
                                                <div class="comment-links"><a class="comment-reply-link"
                                                                              rel="nofollow"
                                                                              href="#"
                                                                              aria-label="Reply to Mr WordPress">Reply</a>
                                                </div>
                                            </footer>
                                        </article><!-- .comment-body -->
                                        <ol class="children clear-list">
                                            <li class="comment bypostauthor">
                                                <article class="comment-body">
                                                    <header class="comment-header">
                                                        <div class="comment-author vcard"><img alt=""
                                                                                               src="/public/style1/images/uploads/avatar/avatar-58x58-01.png"
                                                                                               srcset="/public/style1/images/uploads/avatar/avatar-116x116-01-2x.png 2x"
                                                                                               class="avatar avatar-58 photo"
                                                                                               height="58"
                                                                                               width="58"><strong
                                                                class="fn"><a href="#"
                                                                              rel="external nofollow"
                                                                              class="url">SOPHIA
                                                            BALLARD</a></strong></div>
                                                        <div class="comment-date"> at <a href="#">
                                                            <time datetime="2016-07-04T11:33:08+00:00">11:58 am
                                                                October 17.2013
                                                            </time>
                                                        </a></div>
                                                    </header>
                                                    <div class="comment-content clear-mrg"><p>To delete a
                                                        comment, just log in and view the post's comments. There
                                                        you will have the option to edit or delete them.</p>
                                                    </div>
                                                    <footer class="comment-footer">
                                                        <div class="comment-links"><a class="comment-reply-link"
                                                                                      rel="nofollow"
                                                                                      href="#"
                                                                                      aria-label="Reply to Mr WordPress">Reply</a><a
                                                                class="comment-edit-link" rel="nofollow"
                                                                href="#">Edit</a></div>
                                                    </footer>
                                                </article><!-- .comment-body --></li><!-- .comment --></ol>
                                        <!-- .children --></li><!-- .comment --></ol><!-- .children --></li>
                            <!-----副评论1----->
                            <li class="comment">
                                <article class="comment-body">
                                    <header class="comment-header">
                                        <div class="comment-author vcard"><img alt=""
                                                                               src="/public/style1/images/uploads/avatar/avatar-58x58-default.png"
                                                                               srcset="/public/style1/images/uploads/avatar/avatar-116x116-default-2x.jpg 2x"
                                                                               class="avatar avatar-58 avatar-default photo"
                                                                               height="58" width="58"><strong
                                                class="fn"><a href="#"
                                                              rel="external nofollow" class="url">STEVE
                                            RONALD</a></strong></div>
                                        <div class="comment-date"> at <a href="#">
                                            <time datetime="2016-07-04T11:33:08+00:00">11:58 am October
                                                17.2013
                                            </time>
                                        </a></div>
                                    </header>
                                    <div class="comment-content clear-mrg"><p>To delete a comment, just log in
                                        and view the post's comments. There you will have the option to edit or
                                        delete them.</p></div>
                                    <footer class="comment-footer">
                                        <div class="comment-links"><a class="comment-reply-link" rel="nofollow"
                                                                      href="#"
                                                                      aria-label="Reply to Mr WordPress">Reply</a>
                                        </div>
                                    </footer>
                                </article><!-- .comment-body --></li>
                            <!-----副评论2----->
                            <li class="comment">
                                <article class="comment-body">
                                    <header class="comment-header">
                                        <div class="comment-author vcard"><img alt=""
                                                                               src="/public/style1/images/uploads/avatar/avatar-58x58-default.png"
                                                                               srcset="/public/style1/images/uploads/avatar/avatar-116x116-default-2x.jpg 2x"
                                                                               class="avatar avatar-58 avatar-default photo"
                                                                               height="58" width="58"><strong
                                                class="fn"><a href="#"
                                                              rel="external nofollow" class="url">TOM
                                            BALLARD</a></strong></div>
                                        <div class="comment-date"> at <a href="#">
                                            <time datetime="2016-07-04T11:33:08+00:00">11:58 am October
                                                17.2013
                                            </time>
                                        </a></div>
                                    </header>
                                    <div class="comment-content clear-mrg"><p>To delete a comment, just log in
                                        and view the post's comments. There you will have the option to edit or
                                        delete them.</p></div>
                                    <footer class="comment-footer">
                                        <div class="comment-links"><a class="comment-reply-link" rel="nofollow"
                                                                      href="#"
                                                                      aria-label="Reply to Mr WordPress">Reply</a>
                                        </div>
                                    </footer>
                                </article><!-- .comment-body --></li>
                        </ol>
                    </div>
                </div>
                <!-----评论结束------->

                <!-----留下一个已经评论的评论------->
                <div id="respond" class="comment-respond">
                    <h2 id="reply-title" class="title text-upper">Leave a Comment</h2>
                    <div class="padd-box-sm">
                        <form action="#" method="post" id="commentform" class="comment-form">
                            <p class="logged-in-as">
                                <a href="" aria-label="Logged in as admin. Edit your profile.">Logged in as
                                    admin</a>.
                                <a href="">Log out?</a>
                            </p>
                            <div class="form-group"><label class="form-label" for="comment">Your Comment</label>
                                <div class="form-item-wrap">
                                        <textarea class="form-item" id="comment" name="comment" cols="45" rows="8"
                                                  maxlength="65525" aria-required="true" required="required"></textarea>
                                </div>
                            </div>
                            <div class="form-submit form-item-wrap">
                                <input class="btn btn-primary btn-lg" name="submit" type="submit"
                                       value="Post Your Comment">
                            </div>
                        </form>
                    </div>
                </div>
                <!-----留下一个已经评论的评论结束------->

                <!------留下一个新的评论------->
                <div id="respond2" class="comment-respond">
                    <h2 id="reply-title2" class="title text-upper">Leave a Comment
                        <small><a rel="nofollow" id="cancel-comment-reply-link" href="" style="display:none;">Cancel
                            reply</a></small>
                    </h2>
                    <div class="padd-box-sm">
                        <form action="#" method="post" id="commentform2" class="comment-form" novalidate="">
                            <p class="comment-notes">
                                <span id="email-notes"> Your email address will not be published.</span>
                                Required fields are marked <span class="required">*</span>
                            </p>
                            <div class="form-group">
                                <label class="form-label" for="comment2">Comment</label>
                                <div class="form-item-wrap">
                                        <textarea class="form-item" id="comment2" name="comment" cols="45" rows="8"
                                                  maxlength="65525" aria-required="true" required="required"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="author">Name
                                    <span class="required">*</span>
                                </label>
                                <div class="form-item-wrap">
                                    <input class="form-item" id="author" name="author" type="text" value=""
                                           size="30" maxlength="245" aria-required="true" required="required">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="email">Email
                                    <span class="required">*</span>
                                </label>
                                <div class="form-item-wrap">
                                    <input class="form-item" id="email" name="email" type="email" value="" size="30"
                                           maxlength="100" aria-describedby="email-notes" aria-required="true"
                                           required="required">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="url">Website</label>
                                <div class="form-item-wrap">
                                    <input class="form-item" id="url" name="url" type="url"
                                           value="" size="30" maxlength="200">
                                </div>
                            </div>
                            <div class="form-submit form-item-wrap">
                                <input class="btn btn-primary btn-lg"
                                       name="submit" type="submit"
                                       value="Post Comment">
                            </div>
                        </form>
                    </div>
                </div>
                <!----留下一个新评论已经结束------->
            </div>
        </div>
    </div>
</div>
{% endblock %}